﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/style.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../static/img/favicon.ico" rel="shortcut icon" />
    <link href="https://fonts.googleapis.com/css?family=Lato:700,900%7CDidact+Gothic" rel="stylesheet">
    <title>Opium</title>
</head>
<body>
    <!-- LOADER -->
    <div id="loader-wrapper">
        <div class="cssload-container">
            <div class="cssload-whirlpool"></div>
        </div>
    </div>
    <!-- LOADER -->

    <!-- HEADER -->
    <header class="header-style header-style2 header-style3 header-style4">
        <div class="hamburger-icon3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="header-content">
            <div class="row">
                <div class="col-xs-6 col-sm-2">
                    <a class="logo" href="index.html">
                        <img src="../static/img/logo.png" alt="#" />
                    </a>
                </div>
                <div class="col-xs-6 col-sm-10">
                    <div class="hamburger-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="hamburger-icon2">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <nav class="normal-s">
                        <ul>
                            <li class="dropdown-plus">
                                <a href="index.html">HOME</a>
                                <span></span>
                                <ul>
                                    <li><a href="index.html">Home #1</a></li>
                                    <li><a href="index2.html">Home #2</a></li>
                                    <li><a href="index3.html">Home #3</a></li>
                                    <li><a href="index4.html">Home #4</a></li>
                                    <li><a href="index5.html">Home #5</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="about.html">ABOUT</a>
                            </li>
                            <li>
                                <a href="detail.html">PORTFOLIO</a>
                            </li>
                            <li class="dropdown-plus">
                                <a href="blog.html">BLOG</a>
                                <span></span>
                                <ul>
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blogdetail.html">Blog detail</a></li>
                                </ul>
                            </li>
                            <li class="active">
                                <a href="contact.html">CONTACT</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="section">
                    <p>A small design & technology freelancer based out of Atlanta, GA. Catch up on my latest projects and get in touch.</p>
                </div>
                <div class="category">
                    <span class="small-1">CATEGORY</span>
                    <ul>
                        <li class="active">All</li>
                        <li>Development</li>
                        <li>Illustration</li>
                        <li>Product</li>
                        <li>Typography</li>
                    </ul>
                </div>
                <div class="sort-by">
                    <span class="small-1">SORT BY</span>
                    <ul>
                        <li>Random</li>
                        <li class="active">Popular</li>
                        <li>Rate</li>
                    </ul>
                </div>
                <div class="normal-3 section">
                    <ul>
                        <li>
                            <a href="tel:+138(095)6526538">+138 (095) 6526 538</a>
                        </li>
                        <li>
                            <a href="mailto:info@opium.com">info@opium.com</a>
                        </li>
                    </ul>
                    <div class="empty-space h10-xs fl"></div>
                    <div class="follow">
                        <a class="social" href="https://www.facebook.com/" target="_blank">
                            <i class="fa fa-facebook" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.instagram.com/" target="_blank">
                            <i class="fa fa-instagram" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.pinterest.com/" target="_blank">
                            <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                        </a>
                        <a class="social" href="https://www.twitter.com/" target="_blank">
                            <i class="fa fa-twitter" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mob-icon"></div> 
        </div>                                                          
    </header>
    <!-- HEADER -->
    
    <!-- OVERLAY-MENU -->
    <div class="overlay-wrapper height-min">
        <div class="overlay-animation"></div>
        <div class="flex">
            <div class="flex-in">
                <div class="overlay-menu">
                    <div class="container">
                        <div class="row">
                            <div class="btn-close"><span></span><span></span></div>
                            <div class="col-lg-2 col-lg-offset-5">
                                <ul>
                                    <li class="dropdown-plus">
                                        <a href="index.html">HOME</a>
                                        <span></span>
                                        <ul>
                                            <li><a href="index.html">Home #1</a></li>
                                            <li><a href="index2.html">Home #2</a></li>
                                            <li><a href="index3.html">Home #3</a></li>
                                            <li><a href="index4.html">Home #4</a></li>
                                            <li><a href="index5.html">Home #5</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="about.html">ABOUT</a>
                                    </li>
                                    <li>
                                        <a href="detail.html">PORTFOLIO</a>
                                    </li>
                                    <li class="dropdown-plus">
                                        <a href="blog.html">BLOG</a>
                                        <span></span>
                                        <ul>
                                            <li><a href="blog.html">Blog</a></li>
                                            <li><a href="blogdetail.html">Blog detail</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="contact.html">CONTACT</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end OVERLAY-MENU -->

    <!-- content -->
    <div id="content-wrapper">
        
        <div class="empty-space h45-xs h65-sm"></div>
        <div class="container-fluid-style2">
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2">
                    <article>
                        <h1 class="h1">CONTACT US</h1>
                        <div class="empty-space h25-xs"></div>
                        <p class="normal-l grey-dark">Praesent euismod sollicitudin tristique. Donec imperdiet convallis ante, id porttitor leo consequat non. Suspendisse rutrum sed nisl in luctus. Proin accumsan eget lorem id varius</p>
                    </article>
                </div>
            </div>
            <div class="empty-space h155-md h60-xs"></div>
            <div class="contacts">
                <div class="row">
                    <div class="col-md-3">
                        <div class="empty-space h0-sm h40-md fl"></div>
                        <div class="section">
                            <p class="biggest">Address</p>
                            <div class="empty-space h10-xs"></div>
                            <ul class="normal">
                                <li>
                                    <a href="">319 Clematis St.  Suite 100 WPB, FL 33401</a>
                                </li>
                                <li>
                                    <a href="">210 Velykogo St.  Suite 100 WPB, FL 33401</a>
                                </li>
                            </ul>
                            <div class="empty-space h35-xs"></div>
                            <p class="biggest">Work hour</p>
                            <div class="empty-space h10-xs"></div>
                            <ul class="normal">
                                <li>Mn. - Fr.: from 9-00 till 18-00</li>
                            </ul>
                        </div>
                        <div class="empty-space h35-xs h40-md fl"></div>
                    </div>
                    <div class="col-md-3 pull-right">
                        <div class="empty-space h0-xs h40-md fl"></div>
                        <div class="section">
                            <p class="biggest">Phone</p>
                            <div class="empty-space h10-xs"></div>
                            <ul class="normal">
                                <li><a href="tel:+1380956526538">+138 (095) 6526 538</a></li>
                                <li><a href="tel:+1380955555538">+138 (095) 5555 538</a></li>
                            </ul>
                            <div class="empty-space h35-xs"></div>
                            <p class="biggest">E-mail</p>
                            <div class="empty-space h10-xs"></div>
                            <ul class="normal">
                                <li><a href="mailto:info@opium.com">info@opium.com</a></li>
                            </ul>
                        </div>
                        <div class="empty-space h0-xs h40-md fl"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-wrapper text-center">
                            <div class="empty-space h50-xs h40-md"></div>
                            <h6 class="h7">Leave a message</h6>
                            <div class="empty-space h30-xs"></div>
                            <form class="contact-form">
                                <div class="input-wrapper">
                                    <div class="input-style">
                                        <input id="inputName" name="name" type="text" class="input">
                                        <label for="inputName">Name...</label>
                                    </div>
                                    <div class="input-style">
                                        <input id="inputEmail" name="email" type="text" class="input">
                                        <label for="inputEmail">E-mail...</label>
                                    </div>
                                    <div class="input-style textarea">
                                        <textarea id="inputMessage" name="message" class="input"></textarea>
                                        <label for="inputMessage">Your message...</label>
                                    </div>
                                </div>
                                <div class="empty-space h20-xs fl"></div>
                                <button class="btn-style1 style2 center-block" type="submit"><span>SUBMIT</span></button>
                            </form>
                            <div class="empty-space h50-xs"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- BLOCK "MAP" -->
            <div class="map-wrapper">
                <div id="map-canvas" data-lat="40.722690" data-lng="-73.981735" data-zoom="13">
                </div>
                <div class="addresses-block">
                    <a class="marker" data-lat="40.727126" data-lng="-73.984896" data-string="Here is some address or email or phone or something else..."></a>
                </div>
            </div>

        </div>

        <div class="empty-space h10-xs h40-md fl"></div>
        <!-- footer -->
        <footer class="footer-style">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="copyright normal-s">
                            Copyright &copy; 2017.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer -->
                
    </div>
    <!-- content -->

    <!-- SUBMIT -->
    <div class="submit text-popup overlay">
        <div class="animation-wrapper full-size"></div>
        <div class="content-wrapper full-size">
            <div class="cell-view page-height">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 text-center">
                            <div class="h2 white"><b class="text-popup-title">submit</b></div>
                            <div class="empty-space h15-xs"></div>
                            <div class="white text-popup-message">
                                The following fields should be filled:- Name - Email - Your Message
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="button-close"></a>
    </div>

    <script src="../static/js/jquery-2.2.4.min.js"></script>
    <script src="../static/js/global.js"></script>

    <!-- MAP -->
    <!---<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="js/map.js"></script>--->

    <!-- CONTACT -->
    <script src="../static/js/contact.form.js"></script>
</body>
</html>
